import React, { Component } from 'react'
import { Link } from 'react-router'
import { isEmpty, isUndefined } from 'lodash/fp'
import { message } from 'antd'

import LoadingZ from 'components/LoadingZ'
import s from '../assets/ArticleDetailed.scss'
import topicContentImg from '../assets/topicContentImg.jpg'
import { bindWechat } from 'tools/bindWechat'

class ArticleDetailed extends Component {
  constructor (props) {
    super(props)
    this.state = {
      articleProfile: ''
    }
  }

  componentDidMount () {
    const { params, fetchArticleDetailed, fetchArticleReplies } = this.props
    bindWechat('论坛帖子', 'V3EX')
    if (!isUndefined(params.id)) {
      fetchArticleDetailed(params.id)
      fetchArticleReplies(params.id)

    }
  }

  componentWillUnmount () {

  }

  componentWillReceiveProps (nextProps) {
    const { params, fetchArticleReplies } = this.props
    const { articleDetailed } = nextProps
    const { repliesItem, commentItem } = articleDetailed
    const { replies } = repliesItem
    const { comment } = commentItem

    if (!isUndefined(articleDetailed) && !isUndefined(commentItem) && !isUndefined(comment) && !isUndefined(comment.result) && !isUndefined(comment.result.data) && commentItem.isFetching !== this.props.articleDetailed.commentItem.isFetching) {
      this.setState({
        articleProfile: ''
      })
      fetchArticleReplies(params.id)
    }
  }

  getInput (e) {
    let value = e.target.value
    switch (e.target.id) {
      case 'articleProfile':
        if (value.length > 500) break
        this.setState({
          articleProfile: value
        })
        break
      default:
    }
  }

  publishArticles () {
    const { articleComment, params, user } = this.props
    if (!isEmpty(this.state.articleProfile)) {
      articleComment(params.id, user.signed.result.userdata.u_id, this.state.articleProfile)
    } else {
      message.error('内容不能为空!')
    }
  }

  render () {
    const { articleDetailed, user } = this.props
    const { signed } = user
    const { isFetching, article } = articleDetailed
    const { result } = article
    const { repliesItem, commentItem } = articleDetailed
    const { replies } = repliesItem
    const { comment } = commentItem
    let contentImg = []
    if (!isUndefined(articleDetailed) && !isUndefined(article) && !isUndefined(article.result) && !isUndefined(article.result.data) && !isUndefined(article.result.data.content_img)) {
      if(article.result.data.content_img != '') {
        let arr = eval('(' + article.result.data.content_img + ')')

        if (Array.isArray(arr)) {
          contentImg = JSON.parse(article.result.data.content_img)
        }
      }
    }
    return (
      <div>
        { isUndefined(articleDetailed.article.result) &&
          <div className='loading'>
            <LoadingZ />
          </div>
        }
        { !isFetching && !isEmpty(articleDetailed) && !isEmpty(articleDetailed.article) && !isEmpty(articleDetailed.article.result) && !isUndefined(result.data) &&
          <div className={s.articleDetailedContent}>
            <p className={s.title}>{result.data.c_name}</p>
            <p className={s.name}>{result.data.a_name}</p>
            <aside>by {result.data.u_name} {result.data.create_time} {result.data.click_number} 次点击</aside>
            <div className={s.topicContent}>
              <p>{result.data.content}</p>
            </div>
            { contentImg.length > 0 &&
              <div className={s.contentImg}>
                { contentImg.map((item, i) =>
                  <img src={item} key={i}/>
                )}
              </div>
            }
          </div>
        }
        { !isEmpty(articleDetailed.repliesItem.replies) && !isEmpty(articleDetailed.repliesItem.replies.result) && !isUndefined(articleDetailed.repliesItem.replies.result.data) && articleDetailed.repliesItem.replies.result.data.length > 0 &&
          <div className={s.repliesList}>
            { articleDetailed.repliesItem.replies.result.data.map((item, i) =>
              <div className={s.replies} key={i}>
                <aside>
                  <img src={item.u_headimg} />
                  <span>{item.u_name}</span>
                </aside>
                <p>{item.comment_content}</p>
                <time>{item.create_time}</time>
              </div>
            )}
          </div>
        }
        { !isUndefined(user) && !isUndefined(signed.result) && !isUndefined(signed.result.userdata) && !isUndefined(signed.result.userdata.u_id) &&
          <div className={s.publishArticles}>
            <h3>说出你的故事:</h3>
            <textarea
              placeholder='回帖内容'
              id='articleProfile'
              className={s.articleProfile}
              ref='articleProfile'
              maxLength='200'
              value={this.state.articleProfile}
              onChange={e => this.getInput(e)}>{this.state.personalProfile}</textarea>
            <a href="javascript:;" onClick={() => this.publishArticles()}>回复</a>
          </div>
        }
      </div>
    )
  }
}

ArticleDetailed.propTypes = {

}

export default ArticleDetailed
